<template>
  <el-container>
    <el-header><h1 class="headertiltle">题库后台管理系统</h1></el-header>
    <el-main>
      <div class="login">
        <div class="loginbox">
          <div class="fbox">登录页面</div>

          <el-form
            class="inpbox"
            :model="loginform"
            :rules="formrules"
            ref="formref"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginform.username"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input v-model="loginform.password" type="password"></el-input>
            </el-form-item>

            <el-form-item class="btn">
              <el-button type="primary" plain @click="login">登录</el-button>
              <!-- 重置表单功能 -->
              <el-button type="info" plain @click="formreset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div></el-main
    >
    <el-footer height="150px">
      <p>联系方式：010-xxxxxxxx 投诉举报电话：010-xxxxxxxxx（xxxxxxxxxx）</p>

      <p>xxx科技©2021 All rights reserved admin@xxxxxxxx.com</p>
      <p>
        京ICP备1xxxxxxx号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
      </p>
      <p>公司地址：xxx市xxx区xxxxxxxxxxxx层-xxxxxxx科技有限公司</p>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      loginform: {
        username: "admin",
        password: "123456",
      },

      formrules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20个字符", trigger: "blur" },
        ],
      },
    };
  },
  async created() {},

  methods: {
    //重置表单
    formreset() {
      this.$refs.formref.resetFields();
    },
    login() {
      this.$refs.formref.validate(async (valid) => {
        // console.log(valid);
        if (!valid) return;
        const res = await this.$http.post("login", this.loginform);
        console.log(res);
        if (res.data.state !== 200) {
          if(res.data.state === 401){
             return this.$message.error("登录失败，您不是管理员");
          }
          return this.$message.error("登录失败，用户名不存在或密码错误");
        }

        this.$message.success("登录成功");

        window.sessionStorage.setItem("token", res.data.token);
        window.sessionStorage.setItem("userinfo", res.data.user);
         window.sessionStorage.setItem("Uid", res.data.Uid);
        this.$router.push("/home");
      });
    },
  },
};
</script>

<style lang="less" scoped >
.el-container {
  text-align: center;
  background-color: whitesmoke;
  height: 100vh;
  .login {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-header {
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-footer {
    background-color: skyblue;
  }

  .loginbox {
    margin: 0 auto;
    width: 30%;
    height: 300px;
    background-color: white;
    border-radius: 10px;

    .fbox {
      text-align: center;
      font-size: 20px;
      font-weight: 900;
    }
  }
}
.inpbox {
  padding: 0 10px;
}
.btn {
  float: right;
  padding-right: 10px;
}
</style>